<include file="header"/>
<script>
	/* $(window).load(function(){
		var nav_h = $('.nav').height();
		$('.wraper').css('paddingBottom',nav_h+8);
		$(function () {
			$('#list-container').masonry({
				itemSelector: '.item',
				isAnimated: true
			});
		});
	    $('.scrm-loadding').hide();
	});
 */
</script>
<body>
<div class="wraper">
	<div class="head">
		<a href="javascript:history.go(-1);" class="iconfont icon-fanhui72"></a>
		<span class="head-name">{BEESCRM:$cate_name}</span>
	</div>
	
	<div class="search clearfix">
		<form action="{BEESCRM::U('base/bonsai/goodsList',array('wechat_id' => $wechat_id,'cate_id' =>$cate_id, 'origin' => $origin))}" method="post" id="search-form">
			<input name="keyword" class="pull-left" type="text" value="{BEESCRM:$keyword}" placeholder="请输入关键词" id="keyword">
			<input name="cate_id" id="cate_id" value="{BEESCRM:$cate_id}"  type="hidden"/>
			<span class="pull-left" id="btn-submit">搜索</span>
		</form>
	</div>	
	
	<div class="list-container clearfix jjjj" id="list-container">
		
		<volist name="data" id="vo">
		
			<a href="{BEESCRM::U('base/bonsai/detail', array('wechat_id' => $wechat_id, 'goods_id' => $vo['goods_id'], 'origin' => $origin ))}" class="item">
				<img src="{BEESCRM:$vo.goods_image}"/>
				<div class="info">
					<div class="tb-mode">
						<p class="title tb-cell">{BEESCRM:$vo.goods_name}</p>
						<p class='tb-cell text-right <eq name="vo.is_collected" value="1">text-red<else/>text-gray</eq>'><span class="iconfont icon-shoucangyishoucang"></span>{BEESCRM:$vo.collection}</p>
					</div>
					<if condition="$type eq 2">
						<p class="sub-contain">会场布置<span class="pull-right"><span class="text-red">{BEESCRM:$vo.meetingplace_price} 元</span>/盆/场</span></p>
					<else/>
						<p class="sub-contain">长期摆放<span class="pull-right"><span class="text-red">{BEESCRM:$vo.long_price} 元</span>/盆/天</span></p>
					</if>
				</div>
			</a>		
		</volist>
		 <!-- <a href="./detail.html" class="item">
			<img src="/assets/base/bonsai/images/flower.jpg"/>
			<div class="info">
				<div class="tb-mode">
					<p class="title tb-cell">兰花</p>
					<p class="tb-cell text-right text-red"><span class="iconfont icon-shoucangyishoucang"></span>20</p>
				</div>
				<p class="sub-contain">会场布置<span class="pull-right"><span class="text-red">1.5 元</span> / 盆 / 天</span></p>
			</div>
		</a>-->
		
	</div>

	<include file="nav"/>
</div>
<include file="commonJs"/>
<script src="/assets/base/bonsai/js/masonry.pkgd.min.js"></script>
<script src="/assets/base/bonsai/js/imagesloaded.pkgd.min.js"></script>
<script>
	$(function(){
		var page = 1;
		var pageCount = "{BEESCRM:$count}";
		var cate_id = "{BEESCRM:$cate_id}";

		var container = $('#list-container');
		container.imagesLoaded(function(){
			container.masonry({
				itemSelector : '.item',
				isAnimated: true
			});
		});
		$(window).scroll(function(){
			if($(window).scrollTop() + $(window).height() + 20 > $(document).height()){
				++page;
				if((page <= pageCount)){
					loadMore(page);
				}
			}
		});
		function loadMore(page){
			$.ajax({
				type:'get',
				dataType:'json',
				data:{},
				url:"{BEESCRM::U('base/bonsai/ajaxGetGoods',array('wechat_id'=>$wechat_id, 'origin'=>$origin))}"+"/p/"+page+"/cate_id/"+cate_id,
				beforeSend:function(){
					$('.scrm-loadding').show();
				},
				success:function(data){
					//console.log(data);
					var json = data.data;
					if(json){
						$(json).each(function(idx) {
							var val = json[idx];
							var wechat_id = "{BEESCRM:$wechat_id}";
							var origin = "{BEESCRM:$origin}";
							var html = '<a href="/base/bonsai/detail/wechat_id/'+wechat_id+'/goods_id/'+val.goods_id+'/origin/'+wechat_id+'" class="item">'
									+'<img src="'+val['goods_image']+'"/>'
									+'<div class="info">'
									+'<div class="tb-mode">'
									+'<p class="title tb-cell">'+val['goods_name']+'</p>'
									+'<p class="tb-cell text-right text-gray"><span class="iconfont icon-shoucangyishoucang"></span>'+val['collection']+'</p>'
									+'</div>';
									
									var goodstypess = Cookie.getCookie('goodstypes');
									if(goodstypess == 2){
										html += '<p class="sub-contain">会场布置<span class="pull-right"><span class="text-red">'+val['meetingplace_price']+' 元</span>/盆/场</span></p>'
									}else if(goodstypess == 3){
										html += '<p class="sub-contain">长期摆放<span class="pull-right"><span class="text-red">'+val['long_price']+' 元</span>/盆/天</span></p>'
									}
									html += '</div></a>';

							var $newElems = $(html).css({ opacity: 0}).appendTo(container);
							$newElems.imagesLoaded(function(){
								$newElems.animate({ opacity: 1},800);
								container.masonry( 'appended', $newElems,true);
							});
						});
					}else{
						$.alert('error', '请稍后再试');
					}
					$('.scrm-loadding').hide();
				},
				error:function(){
					$.alert('error', '通讯错误');
				}
			});
		};
	})
</script>
<script>
	$(document).on('click', '#btn-submit', function(){
		var keyword = $('#keyword').val();
		keyword = keyword.replace(/^\s+|\s+$/g,"");
		if(!keyword){
			$.alert('error', '请输入关键词');return ;
		}
		$('#search-form').submit();
	});
	//去除左右空格
	 function trim(str){
		return str.replace(/^\s+|\s+$/g,"");
	} 
	
</script>
</body>
</html>
